{% extends "base.html" %}
{% block extra_js %}
	var ratings = new Array();
	{% for rating in ratings %}
	ratings[{{ rating.id }}] = "{{ rating.rating }}|{{ rating.country }}";
	{% endfor %}
	$('td').click(function() {
		var el = $(this).parent().parent().parent().parent().next();
			
		//alert (el.attr("id") + ' el');
		if (!el.hasClass("queried")) {
			$.getJSON("/movieapp/movies/fetch_movie_info/" + el.attr("id") + "/",
				function(data) {
					fields = data[0].fields;
					html = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"10\" width=\"100%\"><tr>";
					html += "<td valign=\"top\" width=\"100\"><img src=\"site_media/images/covers/" + fields.imdb_id + ".jpg\" /></td>";
	                                html += "<td valign=\"top\"><a name=\"" + fields.imdb_id + "\"><h2>" + fields.title_cano + "</h2></a>";
	                                html += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\">";
					html += "<tr><td width=\"100\">MPAA Warning</td><td>" + fields.mpaa_warning + "</td></tr>";
					html += "<tr><td>Rating</td><td>";
					jQuery.each(fields.mpaa_rating, function() {
						html += ratings[this] + ", ";
					});
					html += "</td></tr>";
	                                html += "<tr><td>Plot</td><td><ul id=\"plotlist\">";
					jQuery.each(data, function (i) {
						if (i == 0) {
							//alert("i is " + i);
						} else {
							html += "<li><a href=\"#" + fields.imdb_id + "\">" + this.fields.text.substring(0,30) + "...</a><span style=\"display:none;\">" + this.fields.text  + " by " + this.fields.author  + "</span></li>";
						} // else
					});
					html += "</ul></td></tr></table></td></tr></table>";
					el.html(html);
					el.addClass("queried");
					triggerPlotButtons();
				}
			);
		}
		el.slideToggle("fast");
	});
	var triggerPlotButtons = function() {
		$('#plotlist a').click(function() {
			$(this).next().toggle("fast");
		});
	};
{% endblock %}

{% block extra_css %}
	#content table {
		margin: 0px;
	}
	#content ul {
		list-style-type: none;
		width: 100;
		margin: 0px;
		padding: 0px;
	}
	#content ul li {
		display: inline;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	li.even, li.even td {
		padding: 0px;
		margin: 0px;
		background-color: #FFFCFB;
	}
	li.odd, li.odd td {
		background-color: #D4E8D3;
	}
	#content td {
		cursor: pointer; cursor: hand;
		vertical-align: top !important;
	}
	li.popdown {
		color: #FFFCFB;
		background-color: #464D57;
		padding: 5px 10px 10px 10px !important;
		border-width: 0px 3px 3px 3px !important;
		border-style: solid !important;
		border-color: #ED8917 !important;
	}
	#plotlist li, #plotlist {
		display: block !important;
	}
	#plotlist a {
		color: #FFFFFF;
		border-bottom: 1px solid #ED8917;
	}
{% endblock %}
{% block content %}
	<table width="100%">
		<thead>
			<tr>
				<th align="left" width="30%">Title</th>
				<th width="10%" align="center">Score</th>
				<th width="10%" align="center">Rating</th>
				<th width="10%" align="center">Year</th>
				<th width="10%" align="center">Runtime</th>
				<th width="20%" align="right">Genres</th>
			</tr>
		</thead>
	</table>
	{% if object_list %}
	    <ul>
	    {% for movie in object_list %}
	        <li class="{% if forloop.counter|divisibleby:2 %}even{% else %}odd{% endif %}">
				<table width="100%">
					<tr>
						<td class="line" align="left" width="30%">{{ movie.title }}</td>
						<td width="10%" align="center">{{ movie.imdb_rating }}</td>
						<td width="10%" align="center">{{ movie.mpaa_rating.all|first }}</td>
						<td width="10%" align="center">{{ movie.year }}</td>
						<td width="10%" align="center">{{ movie.runtime }}</td>
						<td align="right" width="20%">
						{% for genre in movie.genre.all %}
							{{ genre.name }}{% if not forloop.last %}, {% endif %}
						{% endfor %}
						</td>
					</tr>
				</table>
			</li>
			<li id="{{ movie.id }}" style="display: none" class="popdown">&nbsp;</li>
	    {% endfor %}
	    </ul>
	{% else %}
	    <p>No movies match your criteria.</p>
	{% endif %}
{% endblock %}
